<script>

import * as echarts from 'echarts';
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";

// import $ from 'jquery'
export default {
  name: 'VisualizationFifteen',
  data() {
    return{

    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios.get('/api/vis/data3', {}).then(res => {
        if (res.data.code === 20041) {
          let data = [];
          for (let i = 0; i < res.data.data.length; i++) {
            data.push(
                { value:  res.data.data[i].param2, name:  res.data.data[i].param1 },
            );
          }
          this.init(data);
        }
      }).catch(error => {
        this.open4(error);
      })
    },
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '这是一条错误的提示消息'
      });
    },
    init(data) {
      var chartDom = document.getElementById('main15');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          show: true,
          borderColor: '#fe9a8bb3',
          borderWidth: 1,
          padding: [10, 15, 10, 15],
          confine: true,
          backgroundColor: 'rgba(255, 255, 255, .9)',
          textStyle: {
            color: 'hotpink',
            lineHeight: 22
          },
          extraCssText: 'box-shadow: 0 4px 20px -4px rgba(199, 206, 215, .7);border-radius: 4px;'
        },
        series: [
          {
            type: 'wordCloud',
            shape: 'pentagon',
            left: 'center',
            top: 'center',
            width: '100%',
            height: '100%',
            right: null,
            bottom: null,

            sizeRange: [14, 50],

            rotationRange: [0, 0],
            rotationStep: 0,

            gridSize: 25,
            drawOutOfBound: false,
            layoutAnimation: true,
            textStyle: {
              fontFamily: 'PingFangSC-Semibold',
              fontWeight: 600,
              color: function (params) {
                console.log(params);
                let colors = ['#fe9a8bb3', '#fe9a8bb3', '#fe9a8b03', '#9E87FFb3', '#9E87FFb3', '#9E87FFb3', '#fe9a8bb3', '#fe9a8bb3', '#fe9a8bb3', '#73DDFF', '#58D5FF']
                return colors[parseInt(Math.random() * 10)];
              },
            },
            emphasis: {
              focus: 'none',
            },

            // Data is an array. Each array item must have name and value property.
            data: data,
          },
        ],
      };


      option && myChart.setOption(option);
    }
  }

}
</script>

<template>
  <div id="main15"></div>
</template>

<style scoped>
#main15 {
  width: 100%;
  height: 100%;
}
</style>